<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pam</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,600,400' rel='stylesheet' type='text/css'>
    <style>
        body {
            font-size: 62.5%;
            text-align: center;
            margin:0;
            font-family: 'Open Sans', sans-serif;
        }

        .hero {
            max-width: 100%;
            margin: 0 auto;
            background: url('images/1.jpg');
            /*opacity:0.4;*/
            background-size: cover;
            color:white;
        }
        .hero img {
            width: 8em;
            height: 2em;
            float: left;
        }
        .hero ul {
            float: right;
        }
        .hero ul li {
            float: left;   /*让ul标签里面的li浮动在一排上*/
            margin: 0 .5em;
            /*padding: 1em;*/
            padding: .5em 1em;
            /*border: 1px solid transparent;*/
            border-radius: 2px;  /*边框变圆的比例*/
            list-style-type:none;
        }
        li:last-child {
            border: 1px solid white;  /*给last-child加一个框*/
        }

        .hero h1 {
            font-size: 4em;
            padding: 2em 0 .5em 0;   /*h1上下左右占的比例*/
        }

        .hero h2 {
            font-size: 2em;
        }

        form {
            padding: 2em 0 10em 0;    /*form上下左右的比例*/
            /*padding-bottom: inherit;*/
        }

        input[type="text"] {
            padding: 1em;       /*input的大小*/
            border: 0;          /*消除input的边框*/
            width: 18em;        /*input的框度*/
            border-radius: 2px 0 0 2px;  /*边框变圆的比例*/
            background: white;   /*input的颜色*/
            /*opacity: .3;*/    /*input的透明度*/
        }

        input[type="button"] {
            color: white;    /*字体颜色*/
            padding: 1em;   /*input的大小*/
            border: 0;     /*消除input的边框*/
            width: 6em;    /*input的框度*/
            border-radius: 0 2px 2px 0;
            background-color: lightgreen;
        }

        .numbers {
            width: 80%;
            margin: 0 auto;  /*0代表上下为0ps，auto代表左右自适应,一般这两个(一个auto也行)一起起到居中效果*/
            /*opacity: 1;*/
        }

        .numbers ul {
            position: relative;    /*浮动在页面上*/
            top: -6em;
            /*background: white;*/
        }

        .numbers ul li {
            float: left;      /*让ul标签里面的li浮动在一排上*/
            width: 25%;       /*每个li占的宽度*/
            box-sizing: border-box;   /*控制四个li在一排上*/
            border: 1px solid #faefff;
            background-color:white;
            list-style-type:none;   /*消除li标签的点号*/
        }

        .numbers ul li h2 {
            font-size: 2em;
            padding: 1em 0;
        }

        .numbers ul li h3 {
            padding: 0 0 2em 0;
        }

        .hh1{
            padding-top:16ex;
            text-align:center;
        }
        /*.how-it-works{*/
        /*padding-top: 16ex;*/
        /*}*/
        .how-it-works{
            margin:0;
        }

        .how-it-works ul li{
            list-style-type:none;
            float: left;
            width: 33%;
        }

        .how-it-works ul .detail p{
            text-align: right;
            padding-left: 150px;
        }


        .how-it-works ul .detail .number {
            font-size: 2em;
            color: #7e7d8b;
            border: 1px solid #7e7d8b;
            width: 1em;
            /*height: 1em;*/
            display: block;
            margin: 1em auto 2em auto;
            padding: .4em;
            border-radius:50%;
            background-color: white;
        }

        .how-it-works ul .detail i {
            font-size: 3.6em;
        }

        .how-it-works ul .detail .icon-list {
            color: #ECA95A;
        }

        .how-it-works ul .detail .icon-pencil {
            color: #AC9CD2;
        }

        .how-it-works ul .detail .icon-users {
            color: #4D99CB;
        }

        .how-it-works ul .detail p::before {
            content: "";
            display: block;
            color: #6e6e6e;
        }

        .how-it-works ul .detail h3 {
            font-size: 2em;
            text-transform: uppercase;
            padding: 1em 0;
            display: block;
            content: "";
            background-color: white;
            /*width: 2em;*/
            height: .1em;
            margin: .4em auto;
        }
    </style>
</head>
<body>
<section class="hero">
    <header>
        /<img src="images/1.jpg" alt="logo">
        <ul>
            <li>Agents</li>
            <li>Login</li>
            <li>Signup</li>
        </ul>
    </header>
    <h1>Ladies and gentlemen,welcome my team--pam</h1>
    <h2>先生们，女士们，欢迎来到我们的团队--pam</h2>
    <form action="">
        <input type="text" placeholder="Enter a suburb"><input type="button" value="search">
    </form>
</section>

<section class="numbers">
    <ul>
        <li class="number">
            <h2>Team name</h2>
            <h4>pam</h4>
        </li>
        <li class="number">
            <h2>Team Members</h2>
            <h4>秦志超</h4>
        </li>
        <li class="number">
            <h2>Team Members</h2>
            <h4>钟国斌</h4>
        </li>
        <li class="number">
            <h2>Team Members</h2>
            <h4>欧阳照兴</h4>
        </li>
    </ul>
</section>

<h1 class="hh1">成员信息</h1>
<section class="how-it-works">
    <ul>
        <li>
            <div class="detail">
                <span class="number">1</span>
                <i class="icon-list"></i>
                <h3>秦志超</h3>
                <ul>
                    <li>
                        <p>专业：计算机科学与应用</p>
                        <p>联系：15580102154</p>
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <div class="detail">
                <span class="number">2</span>
                <i class="icon-pencil"></i>
                <h3>钟国斌</h3>
                <ul>
                    <li>
                        <p>专业：计算机科学与应用</p>
                        <p>联系：15616544731</p>
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <div class="detail">
                <span class="number">3</span>
                <i class="icon-users"></i>
                <h3>欧阳照兴</h3>
                <ul>
                    <li>
                        <p>专业：计算机科学与应用</p>
                        <p>联系：18473017990</p>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</section>
</body>
</html>